<!--
 * @Author: krsea 965837746@qq.com
 * @Date: 2025-03-02 19:02:19
 * @LastEditors: krsea 965837746@qq.com
 * @LastEditTime: 2025-03-03 09:35:49
 * @FilePath: \2306\week3t\2.组件的数据管理(创建一个组件，展示如何正确使用 data 选项).html
 * @Description: 
 * 
 * Copyright (c) 2025 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>组件的数据管理</title>
</head>
<body>
    <div id="app">
        <data-component></data-component>
        <data-component></data-component>
    </div>

    <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script>
        Vue.component('data-component', {
            data: {
                message: '这是一个组件的数据'
            },
             // 将 data 改为一个返回对象的函数
            //  data: function () {
            //     return {
            //         message: '这是一个组件的数据'
            //     };
            // },
            template: '<div>{{ message }}</div>'
        });

        var app = new Vue({
            el: '#app'
        });
    </script>
</body>
</html>
